<template>
  <div class="q-pa-md">
    <div class="q-gutter-xs">
      <t-chip
        v-model:selected="desert.Icecream"
        size="20px"
        square
        class="tr-chip-select-type-moon"
      >
        电站选中样式 (阴阳+无对号)
      </t-chip>
      <t-chip
        v-model:selected="desert.Icecream"
        size="20px"
      >
        （默认）
      </t-chip>
      <t-chip
        v-model:selected="desert.Icecream"
        size="20px"
        square
      >
        square
      </t-chip>
      <t-chip
        v-model:selected="desert.Eclair"
        size="20px"
        :color="'rgba(var(--t-color-rgb), 1)'"
        text-color="white"
      >
        Eclair
      </t-chip>
      <t-chip
        v-model:selected="desert.Cupcake"
        size="20px"
        :color="'rgba(var(--t-color-rgb), 1)'"
        square
        text-color="white"
      >
        Cupcake
      </t-chip>
      <t-chip
        v-model:selected="desert.Gingerbread"
        size="20px"
        :color="'rgba(var(--t-color-rgb), 1)'"
        square
        text-color="white"
      >
        Gingerbread
      </t-chip>
    </div>

    <div class="q-mt-sm"> Your pick: {{ selection }} </div>
  </div>
</template>

<script>
  import { computed, reactive, ref } from 'vue';

  export default {
    props: {
        checkSize: {
          type: String,
          default: '400px'
      }
    },
    setup(props) {
      const desert = reactive({
        Icecream: false,
        Eclair: true,
        Cupcake: false,
        Gingerbread: false,
      });
      return {
        props,
        desert,
        selection: computed(() => {
          return Object.keys(desert)
            .filter(type => desert[type] === true)
            .join(', ');
        }),
      };
    },
  };
</script>

<style lang="scss">
.t-chip.tr-chip-select-type-moon {
  padding-right: 12px;
  background: #F0F2F5;
  color: rgba(0,0,0, .9);
}
.t-chip.q-chip--selected.tr-chip-select-type-moon .q-chip__icon--left {
  display: none;
}
.t-chip.q-chip--selected.tr-chip-select-type-moon {
  background-color: rgba(var(--t-color-rgb), 0.1);
  color: rgba(var(--t-color-rgb), 1);
}
</style>
